.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}


@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}
.catBrandWrap{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  overflow: auto;
  background: @fill-base;
  -webkit-overflow-scrolling : touch;
  .max_char{
    position: absolute;
    z-index: 22;
    top:50%;
    left:50%;
    color:@color-text-default;
    margin-left:-2.5rem;
    margin-top:-2.5rem;
    font-size: @city-max-char-font-size;
  }
  .selectTitle{
    padding-left: 10px;
    height: 42px;
    line-height: 42px;
    color:@color-text-light;
    font-size: @font-size-base;
    background-color: @fill-body;
  }
  .hotCarBrandCon{
    width:100%;
    padding-bottom:15px;
    .hotCarBrandList{
      text-align: center;
      width:24%;
      margin-top: 15px;
      float: left;
      img{
        width:50px;
        height: 50px;
        display: block;
        margin: 0 auto;
      }
      .hotCarBrandName{
        display: block;
        font-size:@font-size-caption;
        overflow: hidden;
      }
      &.select{
        .hotCarBrandName{
          color:@color-icon-base;
        }
      }
    }
  }
  .fast_char{
    position: fixed;
    top:50%;
    right: 0px;
    margin-top: -176px;
    text-align: center;
    width:50px;
    a{
      height: 16px;
      line-height: 16px;
      display: block;
      font-size: @font-size-caption-sm;
    }
  }
}
._carBrandCon{
  height:100%;
  overflow: scroll;

}
.carBrandCon {
  .first_char {
    height: 25px;
    line-height: 25px;
    display: block;
    padding-left: 15px;
    width: 100%;
    text-align: left;
    color: @color-text-base;
    font-size: @font-size-caption-sm;
    background: @fill-body;
  }
  .list {
    display: block;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
    .check {
      width: 16px;
      height: 16px;
      display: inline-block;
      margin-left: 16px;
      border-radius: @radius-xm;
      border: 1px solid @border-color-base;
      vertical-align: top;
      .icon {
        display: none;
      }
    }
    img{
      width: 40px;
      margin-left:10px;
      vertical-align: middle;
    }
    .carBrandName {
      font-size: @font-size-caption;
      color: @color-text-base;
      margin-left: 10px;
      vertical-align: middle;
    }
    /*当城市选中的时候样式*/
    &.select{
      .carBrandName{
        color:@color-icon-base;
      }

    }
  }
}
